<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>登录页面 - 临窗旋墨</title>
		<link rel="icon" href="assets/img/lcxm.ico" type="image/ico">
		<meta name="keywords" content="lcxm,临窗旋墨,">
		<meta name="description" content="基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="临窗旋墨">
		<script type="text/javascript" src="commonFragment/header.js"></script>
		<script type="text/javascript">
			$(function() {
				
				$(document).keypress(function(e) {
				　　if (e.which == 13){
						$("button.login").trigger("click");
					}
				});
				var $form = $("form");
				$form.get(0).reset();
				var ja;
				$("button.login").on("click", function() {
					var username = $("#username").val();
					var password = $("#password").val();
					var captcha = $("[name=captcha]").val();
					var captchaToken = $("#token").val();
					if (!username || !password || !captcha) {
						ja = ja ? ja : $.alert("请完整输入","tips");
						ja.open();
						return false;
					}
					var url = "login";
					$request.post(url, {
						data: {
							username: username,
							password: password,
							token: captchaToken,
							captcha: captcha
						}
					}, function(result) {
						var token = result.data;
						storage.set("token", token);
						location.href = 'index.html';
					}, false);
				});

				// 刷新验证码
				$("#captcha").on("click", function() {
					var $img = $(this);
					var url = "captcha";
					$request.post(url, {}, function(result) {
						$("#token").val(result.data.token);
						$img.attr("src", result.data.src);
					});
				}).trigger("click");
			});
		</script>
		<style>
		/* 	body {
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	    height: 100%;
	} */
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
#captcha{
	height: 38px;
	width: 120px;
}
</style>
	</head>

	<body style="background-image: url(assets/img/login-bg-2.jpg); background-size: cover;">
		<div class="row lyear-wrapper">
			<div class="lyear-login">
				<div class="login-center">
					<div class="login-header text-center">
						<a href="index.html">
							<h3 class="text-info text-left">临窗旋墨<span class="text-fadest small">&nbsp;&nbsp;后台管理系统</span></h3>
							<!--<img alt="light year admin" src="assets/img/logo-sidebar.png">-->
						</a>
					</div>
					<form action="#!" method="post">
						<div class="form-group has-feedback feedback-left">
							<input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" autocomplete="off" />
							<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
						</div>
						<div class="form-group has-feedback feedback-left">
							<input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
							<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
						</div>
						<div class="form-group has-feedback feedback-left row">
							<div class="col-xs-7">
								<input type="text" name="captcha" class="form-control" placeholder="验证码">
								<span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
							</div>
							<div class="col-xs-5">
								<input type="hidden" id="token" name="token" />
								<img src="assets/img/captcha.png" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();"
								 title="点击刷新" alt="captcha">
							</div>
						</div>
						<div class="form-group">
							<!-- onclick="location.href='index.html'" -->
							<button class="btn btn-block btn-primary login" type="button">立即登录</button>
						</div>
					</form>
					<hr>
					<footer class="col-sm-12 text-center">
						<p class="m-b-0">Copyright © 2019 <a href="http://www.zhihu.com">临窗旋墨</a>. All right reserved</p>
					</footer>
				</div>
			</div>
		</div>

	</body>
</html>
